<script setup lang="ts">
const activityTab = ref(1);
const courseInfo = {
  title: 'LangChain从入门到实践',
  brief: 'LangChain从入门到实践',
  videoSrc: '/video.mp4',
  userInfo: {
    nickname: '小Q',
    avatarUrl: "/user-avatar.jpg"
  }
}
const tabs = [
  {
    id: 1,
    tabName: '资源',
    subComponent: defineAsyncComponent(() => import('@/common/components/educ-course/resource.vue'))
  },
  {
    id: 2,
    tabName: 'AI',
    subComponent: defineAsyncComponent(() => import('@/common/components/educ-course/chat.vue'))
  },
  {
    id: 3,
    tabName: '评论',
    subComponent: defineAsyncComponent(() => import('@/common/components/educ-course/comments.vue'))
  }
]
</script>

<template>
  <div class="video-container">
    <div class="header">
      <div class="header-course-desc">
        <h1 class="header-title">{{ courseInfo.title }}</h1>
        <p class="header-brief">{{ courseInfo.brief }}</p>
      </div>
      <div class="header-course-author flex">
        <a-avatar :src="courseInfo.userInfo.avatarUrl">{{ courseInfo.userInfo.nickname }}</a-avatar>
        <p class="author-name">{{ courseInfo.userInfo.nickname }}</p>
      </div>
    </div>
    <div class="content">
      <div class="content-video">
        <video src="/video.mp4" controls />
      </div>
      <aside class="content-aside">
        <a-tabs v-model:activeKey="activityTab" tab-position="top" :style="{ height: '500px' }">
          <a-tab-pane style="height: 100%;" v-for="tab in tabs" :key="tab.id" :tab="tab.tabName">
            <component :is="tab.subComponent" />
          </a-tab-pane>
        </a-tabs>
      </aside>
    </div>
  </div>
</template>

<style scoped lang="scss">
.video {
  &-container {
    display: flex;
    flex-direction: column;
    gap: $educ-margin-base;
    height: 100%;
    padding: $educ-margin-lg;
    background-color: $educ-color-white;


    .header {
      &-brief {
        font-size: $educ-font-size-sm;
        color: $educ-font-color-grey;
      }

      &-title {
        margin: 0;
        font-size: $educ-font-size-md;
      }

      &-course {
        &-author {
          gap: $educ-margin-base;
          align-items: center;


          .author-name {
            margin: 0;
            font-size: $educ-font-size-base;
            color: $educ-font-color-grey;
          }
        }

      }
    }

    .content {
      display: flex;
      flex-wrap: wrap;
      gap: $educ-margin-lg;

      &-video {
        flex: 1;
        height: 500px;
        background-color: $educ-color-black;

        video {
          width: 100%;
          height: 100%;
        }
      }

      &-aside {
        min-width: 300px;
        max-width: 300px;
        max-height: 500px;

        :deep(.ant-collapse-header) {
          padding: 0 !important;
        }
      }
    }

    :deep(.ant-tabs-content) {
      height: 100%;
    }
  }


}
</style>